<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="space"></div>
  <div id="nav"> 
    <a href="#content1">美食</a>
    <a href="#content1">美食</a>
  </div> 
  <div id="content1">内容区域一
    <a class="a" href="http://www.baidu1.com" target="_blank"/>a链接
    <a class="b" />b链接
  </div>

  <div style="width: 500px;text-align-last:justify;">宽度500px两端对齐的文本</div>
  <span style="width: 500px;text-align-last:justify;display: inline-block;">宽度500px两端对齐的文本</span>
</body>
<script type="text/javascript">
	window.onscroll=function(){
	  var topScroll =document.body.scrollTop || document.documentElement.scrollTop;//滚动的距离,距离顶部的距离
		console.log(topScroll,'topScroll')
		var space  = document.getElementById("space");
		var bignav  = document.getElementById("nav");//获取到导航栏id
		var spaceOffsetHeight = space.offsetTop    //以spce的滚动高度为参照
		console.log(spaceOffsetHeight,'navOffsetHeight')
		if(topScroll > spaceOffsetHeight){  
      bignav.style.cssText = 'position:fixed;top:0;width:100%';
			// bignav.style.position = 'fixed';
			// bignav.style.top = '0';
			// bignav.style.zIndex = '9999';
		} else {
			bignav.style.position = 'static';
		}
	}
</script>
<style>
  body{
    margin: 0;
    padding: 0;
  }
  #space{
    height: 100px;
    background-color: antiquewhite;
  }
  #nav{
    height: 50px;
    background-color: red;
  }
  #content1{
    height: 600px;
    background :aqua;
  }
  .fixed{
    position: fixed;
    top:0;
    z-index: 999;
  }
  /* .a{
    text-decoration: none; 
    color: black;
  } */
  /* 未被访问时样式 */
  .a:link{
    text-decoration: none; 
    color: black;    
  }
  /* 鼠标移入样式 */
  .a:hover{
    text-decoration: underline;
    color: blue;
  }
  /* 访问过样式 */
  .a:visited{
    color: red;
  }

       
     
</style>
</html>